<template>
  <view class="page">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>

    <view class="u-padding-20" v-if="!userInfo.token">
      <u-empty :text="$t('nologin')" mode="permission"></u-empty>
    </view>

    <view class="u-padding-20" v-else>
	<!--u-loading-page :loading="loadstatus"></u-loading-page-->

	<u--form labelPosition="left" ref="uForm" labelWidth="100px">
		<u-form-item :label="$t('会员种别')" prop="fullname" labelAlign="right" labelPosition="left">
			<u-radio-group v-model="user_groupid">
				<u-radio :label="$t('行者')" :name="1"></u-radio>
				<u-radio :label="$t('医生')" :name="2"></u-radio>
				<u-radio :label="$t('患友')" :name="4"></u-radio>
			</u-radio-group>
		</u-form-item>
		<u-form-item :label="$t('所在机构')" prop="fullname" labelAlign="right" labelPosition="left" v-if="user_groupid==2">
				<u--input v-model="userInfo.company_name" type="text" />
		</u-form-item>

		<u-form-item :label="$t('realname')" prop="realname" labelPosition="left">
			<u--input v-model="userInfo.realname" type="text" :disabled="userInfo.is_realname?true:false"/>
			<text slot="right" class="u-p-l-20">{{$t('authnotmodi')}}</text>
		</u-form-item>
		<u-form-item :label="$t('phone')" prop="phone" labelPosition="left">
			<u--input v-model="userInfo.phone" type="text" :disabled="userInfo.is_mobile?true:false"/>
			<text slot="right" class="u-p-l-20">{{$t('authnotmodi')}}</text>
		</u-form-item>
		<u-form-item :label="$t('email')" prop="email" labelPosition="left">
			<u--input v-model="userInfo.email" type="text" :disabled="userInfo.is_email?true:false"/>
		</u-form-item>
		<u-form-item :label="$t('birthday')" prop="confirmpassword" labelPosition="left">
			<u-datetime-picker
					:show="birthdayshow"
					v-model="userInfo.birthday"
					mode="date"
					@confirm="birthdayconfirm"
					@cancel="birthdayshow=false"
					:minDate="-639053901000"
			></u-datetime-picker>
			<view @click="birthdayshow=true" style="border:solid 1px #ccc;width:100%;padding:6px;">
				<text v-if="userInfo.birthday==''||userInfo.birthday==null">{{$t('btn.plsselect')}}</text> {{birthday}}
			</view>
		</u-form-item>
		<u-form-item :label="$t('gender')" labelPosition="left">
			  <u-radio-group v-model="userInfo.gender" placement="row">
				<u-radio :label="$t('男')" :name="1" class="u-m-r-50"></u-radio>
				<u-radio :label="$t('女')" :name="2"></u-radio>
			  </u-radio-group>
			
		</u-form-item>
		
        <!--u-form-item class="form-item" label="所在地区">
			<addressd @changes="area" :addressd="addressData"></addressd>
        </u-form-item-->
		<u-form-item :label="$t('postcode')" prop="zipcode" labelPosition="left">
			<u--input v-model="userInfo.zipcode" type="text" @input="zipcodeHandler"/>
		</u-form-item>
		<u-form-item :label="$t('cityarea')" prop="cityarea">
			<u--input v-model="userInfo.cityarea" type="text" />
		</u-form-item>
		<u-form-item :label="$t('fulladdress')" prop="address">
			<u--input v-model="userInfo.address" type="text" />
		</u-form-item>
		<!--u-form-item :label="$t('驾驶证类别')" prop="confirmpassword">
			<view @click="drivingcerttypeshow=true" style="border:solid 1px #ccc;width:100%;padding:6px;">
				<text v-if="userInfo.drivingcerttype==''||userInfo.drivingcerttype==null">请选择</text> {{userInfo.drivingcerttype}}
			</view>
			<u-picker
			:confirmText="$t('confirm')"
			:cancelText="$t('cancel')"
			:show="drivingcerttypeshow" ref="uPicker" :columns="drivingcerttype" @cancel="drivingcerttypeshow=false" @confirm="drivingcerttypeconfirm"></u-picker>
		</u-form-item>
		<u-form-item :label="$t('免许证番号')">
			<u--input v-model="userInfo.drivingcertcode" type="text" />
		</u-form-item>-->

		<!--u-form-item :label="$t('建筑物名')">
			<u--input v-model="userInfo.build" type="text" />
		</u-form-item>
		<u-form-item :label="$t('广告信')" prop="fullname" labelAlign="right" labelPosition="left">
			<u-checkbox-group @change="handleCheckboxChange">
				<u-checkbox :label="$t('不接受广告信')" name="5" :checked="notacceptad==5"></u-checkbox>
			</u-checkbox-group>
		</u-form-item-->
		
	</u--form>

	<u-gap height="20"></u-gap>
	<u-button type="primary" @click="userlist_edit_submit" :disabled="loadstatus" :loading="loadstatus" loadingText="...">{{$t('modify')}}</u-button>
	<u-gap height="10"></u-gap>



    </view>
  </view>
</template>


<script>
import { mapState, mapMutations } from "vuex"
import { api_editUserinfo,api_user_region } from '@/config/api.js'
import addressd from "@/components/jm-address/jm-address.vue"
import dayjs from "@/uni_modules/uview-ui/libs/util/dayjs.js";
export default {
    components: {
        addressd
    },
  data() {
    return {
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
	  model:{},
	  user_groupid:1,
	  notacceptad:0,
	  notacceptadCk:0,
	addressData:{
				region_fullname:'',
				region_id:'',
				addr_id:'',
				phone:'',
				consignee:'',
				mobile:'',
				zipcode:'',
				cityarea:'',
				address:'',
				is_default:false,
				region_idpath:[1,11,0],
				region_namepath:[this.$t('select1'),this.$t('select2'),this.$t('select3')]
	},
			addr_id:"",
			birthdayshow:false,
			drivingcerttypeshow:false,
			drivingcerttype:[
                    [this.$t('驾驶证'), this.$t('身份证')]
                ],
			birthday:''
    };
  },
  computed: {
    ...mapState(["userInfo"]),
	groupIdExists(state) {
    return (id) => {
      return state.userInfo && state.userInfo.group_ids.includes(id);
    };
  }
  },
  onLoad(options) {
	  console.log(this.userInfo)
	this.get_region()
	if (this.userInfo && this.userInfo.group_ids.includes(1)) {
		this.user_groupid=1
	}
	if (this.userInfo && this.userInfo.group_ids.includes(2)) {
		this.user_groupid=2
	}
	if (this.userInfo && this.userInfo.group_ids.includes(5)) {
		this.notacceptad=5
	}else{
		this.notacceptad=0
	}
	
	
	
  },

  methods: {
	  zipcodeHandler(e){
		  if(e.length>5){
			api_user_region({zipcode:e},{custom: {load:false,auth:true}}).then((res) => {
				//this.addressData=res.region
				this.userInfo.cityarea=''
				this.userInfo.region_id=res.region.region_id
				res.region.region_namepath.forEach((area,index)=>{
					if(index>0){
						this.userInfo.cityarea+=area
					}
				})
			}).catch((e) => {});
		  }
	  },
	  drivingcerttypeconfirm(e){
		  this.drivingcerttypeshow=false
		  this.userInfo.drivingcerttype=e.value[0]
		  this.show = false
	  },
	  birthdayconfirm(e){
		  this.birthday = dayjs(e.value).format("YYYY-MM-DD");
		  this.birthdayshow=false
	  },
    handleCheckboxChange(event) {
      let selectedLabels = event; // 从事件对象中获取选中复选框的 label 值
	  const containsValue = selectedLabels.includes('5');
		if (containsValue) {
		  this.notacceptadCk=1
		} else {
		  this.notacceptadCk=0
		}
    },
    userlist_edit_submit() {
		api_editUserinfo({
			userinfoedit:JSON.stringify({
				birthday:this.birthday,
				gender:this.userInfo.gender,
				region_id:this.userInfo.region_id,
				phone:this.userInfo.phone,
			}),
			notacceptad:this.notacceptadCk,
			user_groupid:this.user_groupid,
			member_wechatedit:JSON.stringify({}),
			realname:this.userInfo.realname,
			fullname:this.userInfo.fullname,
			zipcode:this.userInfo.zipcode,
			cityarea:this.userInfo.cityarea,
			address:this.userInfo.address,
			company_name:this.userInfo.company_name,
			pandi:this.userInfo.pandi,
			build:this.userInfo.build,
			//drivingcertend:this.userInfo.drivingcertend
		}).then((res) => {
			this.$tools.msg(this.$t('modifiedsuccessfully'))
			this.$store.dispatch("getUserInfo",{member_id:this.userInfo.member_id});
		}).catch((err) =>{
			
		})
    },
		area(e) {
			this.region_fullname=e.region_fullname
			this.addressData.region_id=e.region_id
			this.userInfo.region_id=e.region_id
        },
		get_region() {
			this.birthday=this.userInfo.birthday
			api_user_region({region_id:this.userInfo.region_id}).then((res) => {
				console.log('region_id',res)
				this.userInfo.cityarea=''
				res.region.region_namepath.forEach((area,index)=>{
					if(index>0){
						this.userInfo.cityarea+=area
					}
				})
			}).catch((e) => {});
        },
  },
};
</script>
<style lang="scss" scoped>
/deep/.u-form-item__body{
	padding: 3px 0px;
}
</style>
